<template>
	<view class="tab-container" :style="{color:titleColor}">
		<scroll-view class="top-title" enable-flex="true" :scroll-x="true">
			<text class="title-text" :style="index===current?activeTitle:''" v-for="(item,index) in title" :key="index" @click="emitChange(item,index)">{{item}}</text>
		</scroll-view>
		<view class="content">
			<slot>
			</slot>
		</view>
	</view>
</template>

<script>
import { mapState } from 'vuex';
	export default {
		props:{
			title:{
				type:[Object,Array],
				default:[]
			},
			titleColor:{
				type:String,
				default:"#ccc"
			},
			activeColor:{
				type:String,
				default:"red"
			}
		},
		data() {
			return {
				current:0,
				activeTitle:{
					"color":this.activeColor,
					"border-bottom": "1px solid red",
				}
			}
		},
		computed:{
			...mapState(['themeType'])
		},		
		methods: {
			emitChange(item,index){
				this.current=index
				this.$emit("tabChange",{name:item,index})
			}
		}
	}
</script>

<style lang="scss" scoped>
.tab-container{
	// color: #fff;
	.top-title{
	    display: flex;
	    width: 100%;
	    height: 100rpx;
	    line-height: 100rpx;
	    overflow: hidden;
	    white-space: nowrap;
	    touch-action: none !important;
		.title-text{
			padding: 20rpx;
			transition: all .5s linear;
		}
	}
}
</style>
